<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>mac analyse</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css">
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">MAC</a>
        </div>
    </nav>


<div class="container">
    <div class="alert-wrapper">
        <div class="alert alert-primary" role="alert">
            统计留存 分析
        </div>
    </div>
    <div class="filter-wrapper">
        <form id="form1">
            {% csrf_token %}
            <div class="form-group row align-items-center">
                <div class="col-sm-2">统计版本</div>
                <div class="col-sm-4 row">
                    <select id="index" name="index" class="selectpicker form-control"  data-live-search="true">
                        <option value="" selected="true" disabled="true">请选择统计版本</option>
                        {% for tongji in tongji_list %}
                        <option value="{{ tongji }}">{{ tongji }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group row align-items-center">
                <div class="col-sm-2">起止日期</div>
                <div class="col-sm-10 row">
                    <div class="col-4">
                        <input type="date" class="form-control" name="analyse_at_from" value="" placeholder="开始" >
                    </div>
                    <div class="col-4">
                        <input type="date" class="form-control" name="analyse_at_to" value="" placeholder="结束" >
                    </div>
                </div>
            </div>


        </form>
        <button id="btn" class="btn btn-primary" onclick="confirmAct()">
            <b>分析</b>
        </button>
        <button id="btn2" class="btn btn-primary hide" data-toggle="modal" data-target="#myModal">
            <b>结果</b>
        </button>
    </div>
    <!--
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  结果
</button>
-->
</div>


<div id="mask" class="mask"></div>
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-lg" role="document" style="width: 1800px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					分析结果
				</h4>
			</div>
			<div class="modal-body">
                <div id="advisor">

                </div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html>